<template>
  <div class="keepServices">
    <x-header class="header" :left-options="{showBack: showHeaderBack,preventGoBack:true}" @on-click-back="goToPage" ref="header">存取酒服务</x-header>
    <div class="topHolder"></div>
    <tab v-model="choosenTab" ref="tab">
      <tab-item selected @on-item-click="changeTab(0)">扫码取酒</tab-item>
      <tab-item @on-item-click="changeTab(1)">我的存酒</tab-item>
    </tab>
    <swiper v-model="choosenTab" :show-dots="false" :height="tabContentHeight">
      <swiper-item>
        <card>
          <div class="card-padding" slot="content">
            <i class="iconfont icon-erweima2 barcode"></i>
            <box gap="1rem 0.8rem">
              <x-button :gradients="['#FF5E3A', '#FF9500']" @click.native="scan" :show-loading="loadingStatus" :disabled="loadingStatus" text="扫一扫"></x-button>
            </box>
            <group-title>请点击按钮调起微信“扫一扫”<br/>扫描房台中的二维码</group-title>
          </div>
        </card>
      </swiper-item>
      <swiper-item>
        <div class="keepList">
          <a v-for="(item,index) in keepList" :key="index" @click="toDetail(item.KEEPWINE_ID)" class="item">
            <form-preview class="formPreviewList label" :class="[getStateClass(item.STATE)]" :header-label="'存酒日期：' + item.DATETIME" :header-value="getState(item.STATE)" :body-items="getBody(item)"></form-preview>
          </a>
          <div class="listNoItem" v-if="keepList.length <= 0">暂无存酒</div>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
  import { Box, Card, GroupTitle, XButton, Tab, TabItem, Swiper, SwiperItem, FormPreview } from 'vux'
  import {getKeepList,getWeiXinConfig} from "../../api";
  import {message} from "../../common/util";

  export default {
    name:'keepServices',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        choosenTab:0,
        tabContentHeight:'',
        keepList:[]
      }
    },
    components:{
      Box,
      Card,
      GroupTitle,
      XButton,
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      FormPreview
    },
    computed:{

    },
    methods:{
      goToPage(){
        this.$router.push({path:'/'})
      },
      scan(){
        if(JSON.parse(localStorage.getItem('debugMode')))
          this.$router.push({name:'扫码操作',params:{tableId:'481cea253aa845c695e9dac4a97ae980'}})//写死测试用台的ID
        else
        this.$wechat.scanQRCode({
          needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: (res)=> {
            //console.log('scanQRCode success')
            //console.log(res.resultStr) // 当needResult 为 1 时，扫码返回的结果
          }
        });
      },
      changeTab(index){
        this.choosenTab = index
      },
      getState(state){
        switch (state) {
          case 0://return '检查中';break
          case 1:return '存酒中';break
          case 2:return '存酒成功';break
          case 3:return '存酒失败';break
          default:return '无状态';break
        }
      },
      getStateClass(state){
        switch (state) {
          case 0:return 'orange';break
          case 1:return 'blue';break
          case 2:return 'green';break
          case 3:return 'red';break
          default:return 'gray';break
        }
      },
      getBody(item){
        let list = []
        list.push({label:'存酒人',value:item.KEEPER + ' - ' + item.keeper_DEPARTMENT})
        list.push({label:'存酒编号',value:item.NUMBER})
        if(item.REMARK != '')list.push({label:'备注',value:item.REMARK})
        list.push({label:'点击查看详情>>',value:''})
        return list
      },
      toDetail(id){
        this.$router.push({name:'存酒详情',params:{keepId:id}})
      },
      setSize(){
        let contentHeight = window.screen.height - this.$refs.tab.$el.offsetHeight - this.$refs.header.$el.offsetHeight - 120
        this.tabContentHeight = contentHeight + 'px'
      }
    },
    mounted(){
      this.setSize()
      window.onresize = ()=>{
        this.setSize()
      }
      return new Promise((resolve, reject)=>{
        if(!JSON.parse(localStorage.getItem('debugMode')) && (sessionStorage.getItem('weixinConfig') == null || !sessionStorage.getItem('weixinConfig'))){
          console.log(window.location.href)
          getWeiXinConfig(window.location.href).then((res)=>{
            if(res.status == 'success'){
              this.$wechat.config(res.data)
              //console.log('getWeiXinConfig 1 in',res.data)
              sessionStorage.setItem('weixinConfig',true)
              resolve()
            }else if(res.status == 'error') {
              message({message:res.msg,type:'error'})
              console.log('getWeiXinConfig error info:', res.msg)
            }
          }).catch((err)=>{console.log('getWeiXinConfig catch info:',err)})
        }else{
          resolve()
        }
      }).then(()=>{
        getKeepList().then((res)=>{
          if(res.status == 'success'){
            this.keepList = res.data
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('getKeepList error info:', res.msg)
          }
        }).catch((err)=>{console.log('getKeepList catch info:',err)})
        this.loadingStatus = false
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      })
    },
    beforeDestroy(){
      window.onresize = ()=>{}
    }
  }
</script>

<style lang="scss" scoped>
  .keepServices{
    .card-padding{
      text-align: center;
      .barcode{font-size: 7rem;}
    }
    .keepList{
      height: 100%;overflow: auto;
      .item{width: auto;height: auto;}
    }
  }
</style>
